<template>
  <div class="dashboard-container">
    <el-container>
      <el-header style="height:auto;padding: 0;">
        <div>
          <el-row>
            <el-col :span="2">
              <span style="margin-top: 10px;display: inline-block">课程分类:</span>
            </el-col>
            <el-col :span="7">

              <el-select @change="queryTwoLevel(ruleForm.parentid)" v-model="ruleForm.parentid" filterable
                         style="width: 80%"
                         placeholder="一级分类">
                <el-option v-for="item in oneLevel" :key="item.id" :label="item.cat_name" :value="item.id">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="7">
              <el-select @change="queryThreeLevel(ruleForm.secondid)" v-model="ruleForm.secondid" style="width: 80%"
                         filterable placeholder="二级分类">
                <el-option v-for="item in twoLevel" :key="item.id" :label="item.cat_name" :value="item.id">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="7">
              <el-select v-model="ruleForm.catid" filterable placeholder="三级分类" style="width: 80%">
                <el-option v-for="item in threeLevel" :key="item.id" :label="item.cat_name" :value="item.id">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </div>
        <el-row style="margin-top: 12px">
          <div  v-if="group_title.indexOf('商务') == -1">
            <el-col :span="2">
              <span style="margin-top: 10px;display: inline-block">请选择商务:</span>
            </el-col>
            <el-col :span="9">
              <el-select v-model="ruleForm.school_businessId" placeholder="请选择" style="width: 100%;">
                <el-option v-for="item in business" :key="item.id" :label="item.admin_fullname" :value="item.id">
                </el-option>
              </el-select>
            </el-col>
          </div>
          <div v-if="group_title.indexOf('产品') == -1">
            <el-col :span="2">
              <span style="margin: 10px 0 0 10px;display: inline-block">请选择产品:</span>
            </el-col>
            <el-col :span="9">
              <el-select v-model="ruleForm.school_productId" placeholder="请选择" style="width: 100%;">
                <el-option v-for="item in product" :key="item.id" :label="item.admin_fullname" :value="item.id">
                </el-option>
              </el-select>
            </el-col>
          </div>
        </el-row>
        <el-row style="margin-top: 12px">
          <el-col :span="2">
            <span style="margin-top: 10px;display: inline-block">完成状态:</span>
          </el-col>
          <el-col :span="9">
            <el-select v-model="ruleForm.school_status" placeholder="请选择" style="width: 100%">
              <el-option v-for="item in statusCom" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="2">
            <span style="margin: 10px 0 0 10px;display: inline-block">显示状态:</span>
          </el-col>
          <el-col :span="9">
            <el-select v-model="ruleForm.school_shown" placeholder="请选择" style="width: 100%">
              <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row style="margin-top: 12px">
          <el-col :span="2">
            <span style="margin-top: 8px;display: inline-block">机构名称:</span>
          </el-col>
          <el-col :span="9">
            <el-input v-model="ruleForm.school_name" placeholder="请输入机构名称" style="width: 100%;"></el-input>
          </el-col>
        </el-row>
        <div class="el-select" style="margin: 10px 0 0 0;width: 20%;">
          <el-button type="primary" class="div-button" @click="search">搜索</el-button>
          <el-button type="primary" class="div-button" @click="reset">重置</el-button>
        </div>

        <el-row>
          <el-button type="primary" @click="$router.push('/register')" style="padding: 12px 40px;margin-top: 12px">添加
          </el-button>
        </el-row>
      </el-header>
      <el-main style="margin-top: 10px;padding: 0;">
        <el-table ref="menuTable"
                  style="width: 100%"
                  :data="list"
                  border>
          <el-table-column label="id" align="center">
            <template slot-scope="scope">{{ scope.row.id }}</template>
          </el-table-column>
          <el-table-column label="机构名称" align="center">
            <template slot-scope="scope">{{ scope.row.school_name }}</template>
          </el-table-column>
          <el-table-column label="产品负责人" align="center">
            <template slot-scope="scope">{{ scope.row.product_name }}</template>
          </el-table-column>
          <el-table-column label="商务负责人" align="center">
            <template slot-scope="scope">{{ scope.row.business_name }}</template>
          </el-table-column>
          <el-table-column label="是否显示" align="center">
            <template slot-scope="scope">
              <el-switch :disabled="scope.row.school_status==0"
                @change="handleHiddenChange(scope.$index, scope.row)"
                :active-value="1"
                :inactive-value="0"
                v-model="scope.row.school_shown">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">{{ scope.row.school_status  | schoolStatus }}</template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleUpdate(scope.$index, scope.row)">编辑
              </el-button>
              <el-button
                size="mini"
                type="text"
                @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <div class="block block-div">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="currentPage4" :page-sizes="[10, 20, 30, 40, 50]" :page-size="10"
                       layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </el-container>
  </div>
</template>

<script>
import {cateComList, schooList, adminComList, schoolAjax, schoolDel} from "@/api/menu";
import {getInfo} from "@/api/user";
import {mapGetters} from "vuex";

export default {
  data() {
    return {
      group_title: '',
      total: null,
      list: [],
      oneLevel: [],
      twoLevel: [],
      threeLevel: [],
      ruleForm: {
        adminId: '',
        school_name: "",
        parentid: "",
        secondid: "",
        catid: "",
        school_productId: '',
        school_businessId: '',
        school_status: '',
        page: "1",
        page_size: "10",
      },
      currentPage4: 1,
      status: [{
        value: '0',
        label: '未显示'
      }, {
        value: '1',
        label: '已显示'
      }],
      statusCom: [{
        value: '0',
        label: '未完成'
      }, {
        value: '1',
        label: '已完成'
      }],
      value: '',
      input: '',
      adminId: '',
      business: [],
      product: [],
    }
  },
  computed: {
    ...mapGetters([
      'id'
    ]),
  },
  mounted() {
    this.getOneLevel()
    this.getBusiness()
    this.getProduct()
    this.getInformation()
  },
  filters: {
    schoolStatus: function (val) {
      switch (val) {
        case 0:
          return '未完成';
          break;
        case 1:
          return '已完成';
          break;
      }
    }
  },
  methods: {
    /**
     * 获取用户信息
     */
    getInformation() {
      getInfo().then(response => {
        console.log(response);
        this.group_title = response.data.group_title
        this.adminId = response.data.id
        this.getOrganList(this.adminId)
        console.log(response.data.id);
      })
    },
    /**
     * 列表
     */
    getOrganList() {
      schooList(Object.assign(this.ruleForm, {adminId: this.adminId})).then(response => {
        console.log(response);
        this.list = response.data.data_list;
        this.total = response.data.total;
      })
    },
    /**
     * 删除
     * @param index
     * @param row
     */
    handleDelete(index, row) {
      this.$confirm('是否要删除该菜单', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        schoolDel(row.id).then(response => {
          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 1000
          });
          this.getOrganList(this.id);
        });
      }).catch(e => e);
    },
    /**
     * 获取列表单条信息
     * @param index
     * @param row
     */
    handleUpdate(index, row) {
      this.$router.push({path: '/organ', query: {rowId: row.id}});
      console.log(row)
    },
    /**
     * 重置
     */
    reset() {
      this.ruleForm = {};
      this.getOrganList();
    },
    /**
     * 搜索
     */
    search() {
      this.getOrganList(this.ruleForm)
    },
    /**
     * 商务
     */
    getBusiness() {
      adminComList({
        admin_group_name: '商务'
      }).then(response => {
        console.log(response);
        this.business = response.data
      })
    },
    /**
     * 产品
     */
    getProduct() {
      adminComList({
        admin_group_name: '产品'
      }).then(response => {
        console.log(response);
        this.product = response.data
      })
    },
    /**
     * 是否显示
     * @param index
     * @param row
     */
    handleHiddenChange(index, row) {
      schoolAjax({
        id: row.id,
        field: 'school_shown',
        value: row.school_shown
      }).then(response => {
        console.log(response);
        if ( response.code === 200 ) {
          console.log(1);
          this.$message({
            message: '修改成功',
            type: 'success',
            duration: 1000
          });
        } else {
          console.log(2);
          this.$message({
            message: response.msg,
            type: 'error',
            duration: 1000
          });
        }
      }).catch(e => e);
    },
    /**
     * 查询二级数据
     */
    queryTwoLevel(value) {
      console.log(value);
      this.ruleForm.secondid = '';
      this.ruleForm.catid = '';
      cateComList({
        cate_parentid: value,
        cate_secondid: 0
      }).then(response => {
        console.log(response);
        this.twoLevel = response.data
        this.twoLevel.unshift({id: "", cat_name: "请选择"})
      })
    },
    /**
     * 查询三级数据
     */
    queryThreeLevel(value) {
      this.ruleForm.catid = '';
      console.log(value);
      cateComList({
        cate_parentid: value,
        cate_secondid: this.ruleForm.parentid
      }).then(response => {
        console.log(response);
        this.threeLevel = response.data
        this.threeLevel.unshift({id: "", cat_name: "请选择"})
      })
    },
    /**
     * 获取一级数据
     */
    getOneLevel() {
      cateComList({
        cate_parentid: 0,
        cate_secondid: 0
      }).then(response => {
        console.log(response);
        this.oneLevel = response.data
        this.oneLevel.unshift({id: "", cat_name: "请选择"})
      })
    },
    /**
     * 每页条数
     * @param val
     */
    handleSizeChange(val) {
      this.ruleForm.page_size = val;
      this.getOrganList();
    },
    /**
     * 页码
     * @param val
     */
    handleCurrentChange(val) {
      this.ruleForm.page = val;
      this.getOrganList();
    }
  }
}
</script>
<style lang="scss" scoped>
.label_style {
  width: 100px;
  display: inline-block;
  margin-left: 10px;
}

.block-div {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.dashboard {
  &-container {
    margin: 0 15px;
    padding: 30px;
    background-color: #fff;
  }

  &-text {
    font-size: 16px;
  }
}

.el-table {
  &-header-wrapper {
    background-color: #000;
  }
}

.el-input {
  width: 20%;
}

.el-select:nth-child(2) {
  margin: 0px 10px;
}

.div-button {
  padding: 12px 0;
  width: 48%;
  margin-left: 0px;
}

.div-button:nth-child(2) {
  float: right;
}

@media screen and (max-width: 472px) {
  .el-select:nth-child(2) {
    margin: 0px;
  }
}
</style>

